<template>
    <div class="mianInfo">
            <div class="left_A">
                <div class="infoTop">
                    <h3>{{ dataLists.name }}\{{ dataLists.clueId }}</h3>
                    <div class="text">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div>
                                    <p>线索创建时间</p>
                                    <p>{{ dataLists.createTime }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>客户手机号码</p>
                                    <p>{{ dataLists.phone }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>渠道来源</p>
                                    <p>{{ channelName }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>线索分配者</p>
                                    <p>{{ dataLists.allocator }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>线索归属时间</p>
                                    <p>{{ dataLists.belongTime }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>线索归属人</p>
                                    <p>{{ dataLists.owner }}</p>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>所属促销活动信息</p>
                                    <p>{{ dataLists.activityName }}/{{ dataLists.activityInfo }}</p>
                                </div>
                            </el-col>
                            <el-col :span="13" style="text-align: right;">
                                <el-button type="danger"  :disabled="isDetail" @click="dialogFormVisible = true">无效线索</el-button>
                                <el-button type="primary"  :disabled="isDetail" @click="open">转为商机</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
                <div class="info_bom">
                    <h3 style="padding: 5px 0;border-bottom: 1px solid #eee;">线索跟进</h3>
                    <div class="main">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <div>
                                    <p>客户姓名</p>
                                    <el-input v-model="dataLists.name"   :disabled="isDetail"/>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>性别</p>
                                    <el-select v-model="dataLists.gender"  :disabled="isDetail" >
                                        <el-option label='男' :value=1>男</el-option>
                                        <el-option label='女' :value=0>女</el-option>
                                        <el-option label='未知' :value=2 >未知</el-option>
                                    </el-select>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>年龄</p>
                                    <el-input-number v-model="dataLists.age" :min="1"  :disabled="isDetail" />
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>客户微信号码</p>
                                    <el-input v-model="dataLists.weixin"   :disabled="isDetail" />
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>客户QQ号码</p>
                                    <el-input v-model="dataLists.qq"    :disabled="isDetail" />
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div>
                                    <p>客户手机号码</p>
                                    <el-input v-model="dataLists.phone"   :disabled="isDetail" />
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div>
                                    <p>客户意向等级</p>
                                    <el-radio-group v-model="dataLists.level"  :disabled="isDetail">
                                    <el-radio v-for="item in hasList" :key="item"  :value=Number(item.dictValue) :label=Number(item.dictValue) size="large">{{item.dictLabel}}</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div>
                                    <p>客户意向类型</p>
                                    <el-radio-group v-model="dataLists.subject"  :disabled="isDetail">
                                    <el-radio v-for="item in levelList" :key="item" :value=Number(item.dictValue) :label=Number(item.dictValue) size="large">{{item.dictLabel}}</el-radio>
                                    </el-radio-group>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div>
                                    <p>跟进记录</p>
                                    <el-input v-model="dataLists.record"   type="textarea" rows="4"   :disabled="isDetail"/>
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <div>
                                    <p>下次跟进时间</p>
                                    <el-date-picker
                                    v-model="dataLists.nextTime"
                                     :disabled="isDetail"
                                    type="date"
                                    placeholder="Pick a date"
                                    style="width: 100%"
                                    />
                                </div>
                            </el-col>
                            <el-col :span="24">
                               <div style="text-align: right;">
                                <el-button type="primary"  :disabled="isDetail" @click="addFollow">提交</el-button>
                                <el-button @click="back">返回</el-button>
                               </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
            <div class="right_A">
                <h3 style="padding: 10px; border-bottom: 1px solid #eee;">线索跟进记录</h3>
                <div v-if="genList">
                    <div class="navs" v-for="item in genList" :key="item">
                    <div><span style="font-weight: 550;font-style: italic;margin-right: 5px;">{{item.createBy}}:</span>{{item.info}}</div>
                    <div style="font-size: 14px; color: #099;">{{item.createTime}}</div>
                </div>
                </div>
                <div class="navs" v-else>
                   暂无记录
                </div>
            </div>


            <!-- 无效索引 -->
            <el-dialog v-model="dialogFormVisible" title="无效线索" width="500">
                    <el-form :model="dataLists">
                        <el-form-item label="原因" label-width="80px" >
                        <el-select v-model="wuxiao.yin" placeholder="请选择原因" style="width: 100%;">
                        <el-option label="空号" value="空号" />
                        <el-option label="停机" value="停机" />
                        <el-option label="无法联系" value="无法联系" />
                        <el-option label="其他" value="其他" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注"  label-width="80px">
                        <el-input v-model="wuxiao.mak" type="textarea" rows="5" />
                    </el-form-item>
                    </el-form>
                    <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="deleteClue">
                        确认
                        </el-button>
                    </div>
                    </template>
                </el-dialog>



    </div>
</template>

<script setup lang="ts">
import { clueListData, getData } from '@/api/tienchin/index';
import { channel } from 'diagnostics_channel';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRoute,useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

const isDetail = ref(false)
onMounted(() => {
    console.log(route.query.id);
    if (route.query.id) {
        getInfo(route.query.id);
        isDetail.value = true;
    }else{
        getInfo(route.query.postid);
        isDetail.value = false;
    }
    getLevel()
    getLevelhas()
    getFollowList()
})


// 通过生命周期拿到id，查询详情数据
const dataLists = ref<any>({});//--------------------------------------------------------------【同时也是提交的数据】----------------
const getInfo = async (id: any) => {
    const res = await getData('/tienchin/clue/'+id, '', 'get');
    console.log(res);
    dataLists.value = res.data;
    getInfos(id)
}
// 通过生命周期拿到id，查询详情总结
const zongjie = ref<any>({});
const getInfos = async (id: any) => {
    const res = await getData('/tienchin/clue/summary/'+id, '', 'get');
    zongjie.value = res.data;
    getChannel()
}
//查询客户意向类型
const levelList = ref([]);
const getLevel = async () => {
    const res: any = await clueListData('/system/dict/data/type/course_type','');
    levelList.value = res.data;
};
//查询客户意向等级
const hasList = ref([]);
const getLevelhas = async () => {
    const res: any = await clueListData('/system/dict/data/type/clue_level','');
    hasList.value = res.data;
};
//查询渠道来源
const channelList = ref([]);
const channelName = ref('');
const getChannel = async () => {
    const res: any = await clueListData('/tienchin/clue/channels','');
    channelList.value = res.data.filter(item => {
        return item.channelId == zongjie.value.channelId;
    });
    // console.log("渠道1=》",channelList.value[0].channelName);
    channelName.value = channelList.value[0].channelName;
    
};
//返回
const back = () => {
    router.go(-1);
};
const dialogFormVisible = ref(false);
const wuxiao = reactive({
    yin: "",
    mak: "",
});
//无效线索
const deleteClue = async() => {
    dataLists.value.record = wuxiao.yin + wuxiao.mak;
    const res: any = await clueListData('/tienchin/clue/invalid',dataLists.value,'post');
    console.log("无效线索==》",res);
    ElMessage({
    message: '无效线索设置成功',
    type: 'success',
  })
  dialogFormVisible.value = false;
};
//转为商机
const toBusiness = async() => {
    const id = dataLists.value.clueId;
    const res: any = await getData('/tienchin/clue/to_business/'+id,'','post');
    console.log("转为商机==》",res);
    ElMessage({
    message: '线索转为商机成功',
    type: 'success',
  })
};
const open = () => {
  ElMessageBox.confirm(
    '是否将当前线索转为客户?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        toBusiness()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

//提交跟进
const addFollow = async() => {
    const res: any = await clueListData('/tienchin/clue/follow',dataLists.value,'post');
    if (res.code == "200") {
        console.log("提交跟进",res);
        ElMessage({
            message: '提交跟进成功',
            type: 'success',
        })
        router.go(-1)
    }
    
};
//查询跟进记录
const genList = ref([]);
const id = route.query.id || route.query.postid;
const getFollowList = async() => {
    const res: any = await getData('/tienchin/follow/record/clue/'+id,'','get');
    genList.value = res.data;
    console.log("跟进记录",genList.value);
};





</script>

<style scoped lang="scss">
    .mianInfo{
        background-color: #fefefe;
        display: flex;
        padding-top:15px ;
        // height: 900px;
        padding-bottom: 50px;
        justify-content: space-between;
        .left_A{
            width: 1050px;
            .infoTop{
                box-shadow: 0 0 10px rgba(48, 31, 31, 0.1);
                background-color: #fff;
                padding: 10px;
                padding-left: 20px;
                h3{
                    font-size: 18px;
                    padding:0 0  5px 0;
                    border-bottom: 1px solid #eee;
                }
                .text{
                    div {
                        padding-top: 5px;
                        margin-bottom: 5px;
                    }
                    div p:first-of-type{
                        font-weight: 550;
                        font-style: italic;
                    }
                    div p:last-of-type{
                        color: #099;
                    }
                }
            }
            .info_bom{
                margin-top: 25px;
                background-color: #fff;
                box-shadow: 0 0 10px rgba(48, 31, 31, 0.1);
                padding: 10px;
                padding-left: 20px;
                .main{
                    margin-top: 10px;
                    div p{
                        font-weight: 600;
                        font-style: italic;
                    }

                    .el-col{
                        margin-bottom: 20px;
                    }
                }
            }
        }
        .right_A{
            background-color: #fff;
            width: 415px;
            box-shadow: 0 0 10px rgba(48, 31, 31, 0.1);
            margin-left: 15px;
            height: 100%;   
            padding-bottom:60px ;
            .navs{
                padding: 15px;
            }
        }
    }
</style>